<template>
    <div class="container">
        <h3>审核管理</h3>
        <el-tabs v-model="activeName"  @tab-click="handleClick">
            <el-tab-pane :label="switchHeadTab == '生产系统'? '配方颗粒':'中药饮片'" name="1">
                <el-row style="margin: 10px 0 20px 0">
                    <el-col :span="7">
                        <el-input placeholder="请输入关键词" style="width:300px" v-model.trim="searchName2">
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                            <el-button slot="append" @click="handleSearch2">搜索</el-button>
                        </el-input>
                    </el-col>
					<el-button style="float:right; margin-right: 10px" @click="download">导出数据</el-button>
                </el-row>

                <el-table
                    :data="tableData"
                    border
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                >
					<el-table-column prop="inventoryType" sortable label="产品大类" v-if='switchHeadTab=="生产系统"'></el-table-column>
                    <el-table-column prop="breedName" sortable label="名称"></el-table-column>
                    <el-table-column prop="batch" sortable label="产品批号"></el-table-column>
					<el-table-column prop="time" sortable label="生产日期"></el-table-column>
					 <el-table-column prop="deadLine" sortable label="保质期（月）"></el-table-column>
					  <el-table-column prop="printNum" sortable label="分包数量"></el-table-column>
                    <el-table-column prop="status" sortable label="状态">
                        <template slot-scope="scope">
							<el-tag v-if="scope.row.status == 0">未分包</el-tag>
							<el-tag v-if="scope.row.status == 1" type="info">待审核</el-tag>
							<el-tag v-if="scope.row.status == 2" type="success">审核通过</el-tag>
							<el-tag v-if="scope.row.status == 3" type="danger">审核拒绝</el-tag>
							<!-- <el-tag v-if="scope.row.status == 0">未分包</el-tag> -->
                            <!-- {{scope.row.status == 0?'未分包':scope.row.status == 1?'已分包':'审核不通过'}} -->
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="150" align="center">
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                @click="handleView(scope.$index, scope.row)"
                            >查看</el-button>
                            <span v-if="scope.row.isRecall == 0">
                            <el-button
                                type="text"
                                v-show="qx"
                                @click="handleAdd(scope.$index, scope.row)"
                                v-if="scope.row.status == 0 || scope.row.status == 3"
                            >分包</el-button>
							<el-button
							    type="text"
								v-show="sh"
							    @click="handleView(scope.$index, scope.row)"
							    v-if="scope.row.status == 1"
							>审核</el-button>

                            </span>
                            <el-button
                                v-if="scope.row.isRecall == 1"
                                type="info"
                                disabled
                            >已召回</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination layout="total, prev, pager, next, jumper" :page-size="pagesize2" @current-change="handleCurrentChange2" :total="total2" :current-page.sync="currentPage2" style="margin-top:20px"></el-pagination>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>


<script>
	import axios from 'axios'
import {pack_findByList} from "@/request/api";
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
				sh:true,
                searchName1: '',
                searchName2: '',
                activeName: '1',
                materialType: '配方颗粒',
                tableData: [],
                total1: 0,
                currentPage1:1,
                pagesize1:10,
                total2: 0,
                currentPage2:1,
                pagesize2:10,
                qx:true,
            };
        },
        created(){
            var data = JSON.stringify(this.$store.state.fb)
            var a = "分包"
			var b = "审核"
            if(data.indexOf(a) != -1){
                this.qx = true
            }else{
                this.qx = false
            }
			if(data.indexOf(b) != -1){
			    this.sh = true
			}else{
			    this.sh = false
			}
        },
        mounted(){
            this.init2()
            // console.log(this.$store.state.newStorge)
        },
        computed:{
            ...mapState(['switchHeadTab'])
        },
        methods: {
			download(){
				 axios({
				        method: 'GET',
				        url: '/pack/out',

				        responseType: 'blob'
				    }).then(res=>{
				        // console.log(res)
				       this.downloadFile(res, '数据.xls')
				    }).catch(err=>{
				        // console.log(err)
				    })
			},
			downloadFile(res, fileName) {
			        let blob = new Blob([res.data]);
			        if (!fileName) {
			          fileName = res.headers['content-disposition'].split('filename=').pop();
			        }
			        if ('msSaveOrOpenBlob' in navigator) {
			          window.navigator.msSaveOrOpenBlob(blob, fileName);
			        } else {
			          const elink = document.createElement('a');
			          elink.download = fileName;
			          elink.style.display = 'none';
			          elink.href = URL.createObjectURL(blob);
			          document.body.appendChild(elink);
			          elink.click();
			          URL.revokeObjectURL(elink.href);
			          document.body.removeChild(elink);
			        }
			},
            // 调用接口
            // init1(){
            //     manufacture_findByList({
            //         materialType: '提取饮片',
            //         searchName: this.searchName1,
            //         page: this.currentPage1,
            //     }).then((res) =>{
            //         this.tableData = res.rows
            //         this.total1 = res.total
            //     })
            // },
            init2(){
                pack_findByList({
                    materialType:this.switchHeadTab == '中药饮片' ? this.switchHeadTab:'配方颗粒',
                    searchName: this.searchName2,
                    page: this.currentPage2,
                }).then((res) =>{
                    this.tableData = res.rows
                    this.total2 = res.total
                })
            },
            // tabs
            handleClick(tab, event) {
                this.materialType = tab.label
                if (this.materialType == '提取饮片') {
                    this.init1()
                } else if(this.materialType == '配方颗粒') {
                    this.init2()
                }
            },
            //提取饮片分包
            handleAdd(index,row){
                this.$router.push({
                    path: '/subpackage/operate',
                    query: { id: row.id }
                });
            },
            //编辑
            handleEdit(index,row){
                this.$router.push({
                    path: '/subpackage/editOperate',
                    query: { id: row.id }
                });
            },
            // 提取饮片查看
            handleView(index,row){
                // console.log(row)
                this.$router.push({
                    path: '/subpackage/viewOperate',
                    query: { id: row.id ,batch:row.batch}
                });
            },
            handleSearch1() {
                this.currentPage1 = 1
                this.init1()
            },
            handleSearch2() {
                this.currentPage2 = 1
                this.init2()
            },
            handleCurrentChange1(val){
                this.currentPage1 = val
                this.init1()
            },
            handleCurrentChange2(val){
                this.currentPage2 = val
                this.init2()
            },
        }
    }
</script>

<style scoped>
.el-pagination{
    text-align: center;
}
.el-col{
    margin-bottom: 0;
}
.el-select .el-input {
width: 130px;
}
.input-with-select .el-input-group__prepend {
background-color: #fff;
}
.el-input--small .el-input__inner{
    border-radius: 5px 0 0 5px !important;
    border-right: none;
}
</style>
